<template>
	<view class="background">
		
		  <view>
		    <view class="horizontal-navbar">
		      <view class="nav-item" v-for="(item, index) in navItems" :key="index" @click="navigateTo(item.pagePath)">
		        <text>{{item.text}}</text>
		      </view>
		    </view>
		    <!-- 页面内容区域 -->
		    <view class="text">请选择您要查看的内容</view>
		  </view>
		
	</view>
</template>

<script setup>
	
	import { ref , onMounted} from 'vue';
	
	const navItems = ref([
	  { text: '已登记', pagePath: 'EFR_1' },
	  { text: '管理范围', pagePath: 'EFR_2' },
	  // 添加更多导航项
	]);
	
	const navigateTo = (pagePath) => {
	  uni.navigateTo({
	    url: pagePath
	  });
	};
	
</script>

<style>
	.background{
		width: 100vw;
		height: 100vh;
		background: #F3F5F9;
	}     
	
    .horizontal-navbar {
        display: flex;
        background-color: #f5f5f5;
        padding: 10px;
    }
    .nav-item {
        margin-right: 20px;
    }
	
	.horizontal-navbar {
		display: flex;
		background-color: #f5f5f5;
		padding: 10px;
		  
	    justify-content: space-between; /* 均匀分布导航项 */
	    padding: 10px;
	}
	.nav-item {
	    flex: 1; /* 让每个导航项占据相等的空间 */
	    text-align: center; /* 文本居中 */
	    margin-right: 20px;
	}
	
	.text{
		display: flex;
		justify-content: center;
		margin-top: 200px;
		
		font-size: 20px;
		
	}
	
</style>
